<template>
  <el-row justify="center" style="margin-top: 50px">
    <el-space wrap>
      <el-input v-model="input" style="width: 240px" placeholder="请输入学生姓名或专业进行查询" />
      <el-button type="primary" @click="query">查询</el-button>
      <el-button type="success" @click="changeVisable">添加</el-button>
      <el-button type="info" @click="sendRedirect">跳转</el-button>
      <el-image style="width: 100px; height: 100px" :src="url" />
    </el-space>
  </el-row>
  <el-row justify="center" style="margin-top: 50px">
    <el-table :data="tableData" style="width: 80%" border stripe>
      <el-table-column label="头像" width="180">
        <template #default="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.avatar" />
        </template>
      </el-table-column>
      <el-table-column prop="no" label="学号" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="majur" label="专业" width="180" />
      <el-table-column prop="class" label="班级" width="180" />
      <el-table-column prop="age" label="年龄" width="180" />
      <el-table-column prop="sex" label="性别" width="180" />
      <el-table-column label="操作"
        ><!--插槽，将一部分代码内容以插件形式 作为另一个组件的一部分 -->
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            :icon="Edit"
            circle
            @click="handleEdit(scope.$index, scope.row)"
          >
          </el-button>
          <el-button
            size="small"
            type="danger"
            :icon="Delete"
            circle
            @click="handleDelete(scope.$index, scope.row)"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-row>
  <el-dialog title="添加学生信息" v-model="dialogVisable">
    <el-form :model="form" label-width="150px" style="max-width: 600px">
      <el-form-item label="姓名">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="年龄">
        <el-input-number v-model="form.age" :min="1" :max="100" />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.sex" size="large">
          <el-radio-button label="男" value="1" />
          <el-radio-button label="女" value="2" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="专业">
        <el-select v-model="form.major" filterable placeholder="Select" style="width: 240px">
          <el-option v-for="item in majorData" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="头像">
        <el-upload
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <el-row justify="center" style="margin-top: 50px">
      <el-button type="primary" @click="handlerSubmit">确定</el-button>
      <el-button type="info" @click="hanlderCancel">取消</el-button>
    </el-row>
  </el-dialog>
</template>
<script setup lang="ts">
//引入ref  ref是数据的双向绑定  js中的值和template中的值进行绑定  一个变化 另外一个跟着变化
import { ref } from 'vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import room5 from '../../assets/room5.jpg'
import room4 from '../../assets/room4.jpg'
import type { UploadProps } from 'element-plus'

const url = room5
const imageUrl = ref('')
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}

// 初始化对话框的可见性状态
const dialogVisable = ref(false)

/**
 * 切换对话框的可见性状态
 *
 * 该函数用于通过改变dialogVisable的值来切换对话框的可见性。
 * 当对话框可见时，调用此函数会使对话框变为不可见；
 * 当对话框不可见时，调用此函数会使对话框变为可见。
 */
const changeVisable = () => {
  dialogVisable.value = !dialogVisable.value
}

/**
 * 处理对话框的提交操作
 *
 * 该函数用于在对话框中进行提交操作时的处理逻辑。
 * 它首先将对话框的可见性设置为false，隐藏对话框，
 * 然后打印表单数据，并使用ElMessage组件显示成功消息。
 */
const handlerSubmit = () => {
  dialogVisable.value = false
  console.log(form.value)
  ElMessage({
    message: '添加成功',
    type: 'success'
  })
}

/**
 * 处理对话框的取消操作
 *
 * 该函数用于在对话框中进行取消操作时的处理逻辑。
 * 它的作用是将对话框的可见性设置为false，隐藏对话框。
 */
const hanlderCancel = () => {
  dialogVisable.value = false
}

// 初始化表单数据
const form = ref({
  name: '',
  age: 10,
  sex: '1',
  major: ''
})

// 专业选项数据列表
const majorData = [
  {
    id: '1',
    name: '计算机'
  },
  {
    id: '2',
    name: '软件工程'
  },
  {
    id: '3',
    name: '大数据'
  },
  {
    id: '4',
    name: '软件测试'
  },
  {
    id: '4',
    name: '软件测试'
  }
]

//定义一个变量 叫input
const input = ref('')
//定义一个变量 叫tableData 和表格进行数据绑定  使用[]数组进行绑定
const tableData = ref([
  { avatar: room5, no: 1, name: '杨鹏', majur: '计算机', class: '2101', age: 20, sex: '男' },
  { avatar: room4, no: 2, name: '杨志玲', majur: '计算机', class: '2101', age: 19, sex: '女' }
])

//定义一个函数叫query
const query = () => {
  //获取ref的值  使用.value进行调用
  ElMessage({
    message: '要查询的条件是：' + input.value,
    type: 'success'
  })
}
const handleEdit = (index, row) => {
  console.log(index)
  console.log(row.name)
  dialogVisable.value = true
}
const handleDelete = (index, row) => {
  console.log(index)
  console.log(row.name)
}
import router from '@/router'
const sendRedirect = () => {
  router.push({ path: '/test' })
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
